<template>
  <div class="properties-content">
    <Form
      ref="formPropsRef"
      class="properties-body"
      label-align="left"
      :colon="false"
      :labelCol="{ style: { width: '92px', color: '#333', fontWeight: '600' } }"
      layout="horizontal"
      :model="formConfig"
    >
      <FormItem label="表单标题" required name="title">
        <Input v-model:value="formConfig.title" placeholder="请输入表单标题" />
      </FormItem>

      <FormItem label="表单宽度">
        <Input v-model:value="formConfig.width" placeholder="请输入宽度" />
      </FormItem>
      <FormItem label="布局">
        <RadioGroup buttonStyle="outline" v-model:value="formConfig.layout">
          <RadioButton value="horizontal">水平</RadioButton>
          <RadioButton value="vertical"> 垂直 </RadioButton>
          <!-- <RadioButton value="inline" :disabled="formConfig.labelLayout === 'Grid'">
            行内
          </RadioButton> -->
        </RadioGroup>
      </FormItem>
      <FormItem label="标签对齐">
        <RadioGroup button-style="outline" v-model:value="formConfig.labelAlign">
          <RadioButton value="left">靠左</RadioButton>
          <RadioButton value="right">靠右</RadioButton>
        </RadioGroup>
      </FormItem>
      <!-- <Row> -->
      <!-- <FormItem label="标签布局">
        <RadioGroup
          buttonStyle="outline"
          v-model:value="formConfig.labelLayout"
          @change="lableLayoutChange"
        >
          <RadioButton value="flex">固定</RadioButton>
          <RadioButton value="Grid" :disabled="formConfig.layout !== 'horizontal'">
            栅格
          </RadioButton>
        </RadioGroup>
      </FormItem> -->
      <!-- </Row> -->
      <FormItem label="标签固定宽度">
        <Input
          :style="{ width: '100%' }"
          v-model:value="formConfig.labelWidth"
          :min="0"
          :step="1"
        />
      </FormItem>
      <div>
        <FormItem label="标签宽度">
          <Slider v-model:value="formConfig.labelCol!.span" :max="24" />
        </FormItem>
      </div>
      <FormItem label="控件宽度">
        <Slider
          v-model:value="formConfig.wrapperCol!.span"
          :marks="{ 12: '12', 24: '24' }"
          :max="24"
        />
      </FormItem>

      <FormItem label="行宽">
        <Slider
          v-model:value="formConfig.baseColProps!.span"
          :marks="{ 12: '12', 24: '24' }"
          :max="24"
        />
      </FormItem>

      <FormItem label="内边距(px)">
        <Slider
          v-model:value="formConfig.padding"
          :marks="{ 8: '8', 16: '16', 24: '24' }"
          :max="24"
        />
      </FormItem>

      <FormItem label="表单属性">
        <Col>
          <Checkbox v-model:checked="formConfig.colon">显示冒号</Checkbox>
        </Col>
        <Col><Checkbox v-model:checked="formConfig.hideRequiredMark">隐藏必选标记</Checkbox></Col>
        <Col><Checkbox v-model:checked="formConfig.isReadonly">只读处理</Checkbox></Col>
      </FormItem>
      <FormItem label="按钮配置" />
      <HEditTable
        class="-mt-5 mb-8"
        v-model:data="formConfig.btns"
        v-if="columns.length"
        :showAllEdit="true"
        :columns="columns"
      >
        <template #title>
          <div class="flex pb-3">
            <a-button size="small" @click="handleButton(null)">新增</a-button>
            <a-button class="ml-2" size="small" @click="handleDelBtn('all')">删除</a-button>
          </div>
        </template>
        <template #action="{ record, index }">
          <a-button
            type="link"
            size="small"
            class="!mr-1 !px-0"
            @click.stop="handleButton(record, index)"
          >
            编辑
          </a-button>
          <a-button type="link" size="small" class="!mx-1 !px-0" @click.stop="handleDelBtn(index)"
            >删除
          </a-button></template
        >
      </HEditTable>
      <FormItem label="函数定义">
        <a-button @click="handleEvent()">编辑函数</a-button>
      </FormItem>
    </Form>
    <FormEventConfig @register="registerEventModal" />
    <ButtonConfigModal :classify="2" @register="registerModal" @success="handleSuccessButton" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import { useFormDesignStoreWithOut } from '/@/store/modules/formDesign';
  import {
    Input,
    Slider,
    Checkbox,
    Col,
    RadioChangeEvent,
    Form,
    FormItem,
    Radio,
  } from 'ant-design-vue';
  import FormEventConfig from './FormEventConfig.vue';
  import ButtonConfigModal from '/@/views/config-center/model-design/components/ButtonConfigModal.vue';
  import { HEditTable, EditColumn } from '/@/components/HEditTable';

  export default defineComponent({
    name: 'FormProps',
    components: {
      Input,
      Slider,
      Checkbox,
      // RadioButtonGroup,
      RadioGroup: Radio.Group,
      RadioButton: Radio.Button,
      Form,
      FormItem,
      Col,
      HEditTable,
      FormEventConfig,
      ButtonConfigModal,
    },
    setup() {
      const formDesignStore = useFormDesignStoreWithOut();
      const { createMessage } = useMessage();
      // const labelColspan = computed(()=>)
      const { formConfig } = useFormDesignState();
      formConfig.value = formConfig.value || {
        labelCol: { span: 5 },
        wrapperCol: { span: 24 },
        event: {},
      };
      const formPropsRef = ref();
      formDesignStore.setFormPropRef(formPropsRef);

      const lableLayoutChange = (e: RadioChangeEvent) => {
        if (e.target.value === 'Grid') {
          formConfig.value.layout = 'horizontal';
        }
      };

      const [registerEventModal, { openModal: eventModal }] = useModal();
      const [registerModal, { openModal: buttonsModal }] = useModal();

      const handleEvent = () => {
        eventModal(true, {
          isForm: true,
        });
      };

      const handleButton = (record: Recordable | null, idx?: number) => {
        if (record) {
          record.index = idx;
        }
        buttonsModal(true, {
          record,
          isUpdate: !!record,
        });
      };
      const handleDelBtn = (idx: number | 'all') => {
        if (idx === 'all') {
          const arr = formConfig.value.btns || [];
          const data = arr.filter((el) => el.check);
          if (!data.length) {
            createMessage.warn('请先选择要删除的列', 0.8);
            return;
          }

          formConfig.value.btns = arr.filter((el) => !el.check);
          return;
        }
        formConfig.value.btns.splice(idx, 1);
      };

      const handleSuccessButton = ({ isUpdate, index, record }) => {
        if (isUpdate) {
          formConfig.value.btns.splice(index, 1, record);
          return;
        }
        formConfig.value.btns.push(record);
      };
      const columns: EditColumn[] = [
        {
          label: '名称',
          class: 'w-20',
          dataIndex: 'label',
          component: 'Input',
          componentProps: {
            placeholder: '请输入名称',
          },
        },
        {
          class: 'w-20',
          label: '权限标识',
          dataIndex: 'code',
          component: 'Input',
          componentProps: {
            placeholder: '请输入名称',
          },
        },
        {
          dataIndex: '',
          label: '操作',
          slot: 'action',
          class: 'w-20',
        },
      ];

      return {
        formPropsRef,
        columns,
        formConfig,
        registerModal,
        registerEventModal,
        lableLayoutChange,
        handleEvent,
        handleButton,
        handleDelBtn,
        handleSuccessButton,
      };
    },
  });
</script>
